<template>
    <div class="app-container">
        <h2 align="center">物品形态转换单</h2>
        <el-row :gutter="10" class="mb8">
            <el-col>
                <el-button
                  icon="el-icon-plus"
                  plain
                  size="mini"
                  type="primary"
                  @click="handleAdd">新增</el-button>
            </el-col>
        </el-row>
        <el-tooltip placement="top">
            <div slot="content">点击任意一行列，即可在下方查看物品形态转换单明细记录</div>
            <el-table :data="WPXTZHDData" v-loading="loading" @row-click="showTab">
                <el-table-column label="转换日期" prop="ZHRQ"/>
                <el-table-column label="转换仓库" prop="ZHCK"/>
                <el-table-column label="转换单号" prop="ZHDH"/>
                <el-table-column label="转换人" prop="ZHR"/>
                <el-table-column label="说明" prop="SM"/>
                <el-table-column
                              align="center"
                              class-name="small-padding fixed-width"
                              fixed="right"
                              label="操作"
                              >
                              <template slot-scope="scope">
                                <el-button
                                  icon="el-icon-edit"
                                  size="mini"
                                  type="text"
                                  @click="handleUpdate(scope.row)"
                                  >修改</el-button>
                                  <el-button
                                    icon="el-icon-delete"
                                    size="mini"
                                    type="text"
                                    @click="handleDelete(scope.row)"
                                    >删除</el-button>
                              </template>
                            </el-table-column>
            </el-table>
        </el-tooltip>

        <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
      :total="total" />

      <!-- 添加或修改物品型态转换单对话框 -->
       <el-dialog
         :title="title"
         :visible.sync="open"
         append-to-body="append-to-body"
         width="1024px"
         >
        <el-form
         :model="WPXTZHDDialog"
         label-width="120px"
         >
        <el-row>
            <el-col :span="12">
                <el-form-item label="转换日期" prop="ZHRQ">
                    <el-date-picker type="date" placeholder="请选择转换日期" v-model="WPXTZHDDialog.ZHRQ"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="转换仓库" prop="ZHCK">
                    <el-select v-model="WPXTZHDDialog.ZHCK" clearable placeholder="请选择转换仓库" size="medium">
                            <el-option
                              v-for="dict in ZHCKOptions"
                              :key="dict.dictValue"
                              :label="dict.dictLabel"
                              :value="dict.dictValue"/>
                        </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="转换单号" prop="ZHDH">
                    <el-input v-model="WPXTZHDDialog.ZHDH" placeholder="请输入转换单号" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12"></el-col>
            <el-form-item label="转换人" prop="ZHR">
                <el-select v-model="WPXTZHDDialog.ZHR" clearable placeholder="请选择转换人" size="medium">
                            <el-option
                              v-for="dict in ZHROptions"
                              :key="dict.dictValue"
                              :label="dict.dictLabel"
                              :value="dict.dictValue"/>
                        </el-select>
            </el-form-item>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="说明" prop="SM">
                    <el-input v-model="WPXTZHDDialog.SM" placeholder="请输入说明" clearable type="textarea"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
        </el-dialog>

        <el-tabs v-model="activeName" v-if="showCard">
            <el-tab-pane label="物品形态转换单明细" name="first">
                <h2 align="center">{{ ZHDH }}物品形态转换单明细</h2>
                <el-table :data="WPXTZHDMXData">
                    <el-table-column label="转换前物品描述" align="center">
                    <el-table-column label="代号" prop="DH"></el-table-column>
                    <el-table-column label="名称" prop="MC"></el-table-column>
                    <el-table-column label="规格" prop="GG"></el-table-column>
                    <el-table-column label="图号" prop="TH"></el-table-column>
                    <el-table-column label="单位" prop="DW"></el-table-column>
                    <el-table-column label="颜色" prop="YS"></el-table-column>
                    <el-table-column label="属性" prop="SX"></el-table-column>
                    <el-table-column label="合同号" prop="HTH"></el-table-column>
                    <el-table-column label="单重" prop="DZ"></el-table-column>
                </el-table-column>
                <el-table-column label="当前库存" prop="DQKC"></el-table-column>
                <el-table-column label="转换前" align="center">
                    <el-table-column label="数量" prop="SL"></el-table-column>
                    <el-table-column label="单价" prop="DJ"></el-table-column>
                    <el-table-column label="金额" prop="JE"></el-table-column>
                </el-table-column>
                <el-table-column label="转换后物品描述" align="center">
                    <el-table-column label="代号" prop="DHZHH"></el-table-column>
                    <el-table-column label="名称" prop="MCZHH"></el-table-column>
                    <el-table-column label="规格" prop="GGZHH"></el-table-column>
                    <el-table-column label="图号" prop="THZHH"></el-table-column>
                    <el-table-column label="单位" prop="DWZHH"></el-table-column>
                    <el-table-column label="颜色" prop="YSZHH"></el-table-column>
                    <el-table-column label="属性" prop="SXZHH"></el-table-column>
                    <el-table-column label="合同号" prop="HTHZHH"></el-table-column>
                    <el-table-column label="单重" prop="DZZHH"></el-table-column>
                </el-table-column>
                <el-table-column label="转换后" align="center">
                    <el-table-column label="数量" prop="SLZHH"></el-table-column>
                    <el-table-column label="单价" prop="DJZHH"></el-table-column>
                    <el-table-column label="金额" prop="JEZHH"></el-table-column>
                </el-table-column>
                <el-table-column label="说明" prop="SM"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return{
            //弹出层标题
            title:"",
            //是否显示弹出层
            open:false,
            //表单参数
            WPXTZHDDialog:{},
            showCard:true,
            ZHDH:'',
            activeName:'first',
            WPXTZHDData:[{
                ZHRQ:'2023/11/03',
                ZHCK:'内销成品仓库',
                ZHDH:'XTZH2401030003',
                ZHR:'E1108170203',
                SM:''
            },{
                ZHRQ:'2023/11/03',
                ZHCK:'内销成品仓库',
                ZHDH:'XTZH2401030003',
                ZHR:'E1108170203',
                SM:''
            },{
                ZHRQ:'2023/11/03',
                ZHCK:'内销成品仓库',
                ZHDH:'XTZH2401030003',
                ZHR:'E1108170203',
                SM:''
            }],
            WPXTZHDMXData:[{
                DH:'YL12006A',
                MC:'正方形水果盘',
                GG:'0*0*0',
                TH:'',
                DW:'只',
                YS:'',
                SX:'A5单色',
                DQKC:'0',
                SL:'576',
                DJ:'0',
                JE:'0',
                DHZHH:'YL12006A',
                MCZHH:'正方形水果盘',
                GGZHH:'0*0*0',
                DWZHH:'只',
                SXZHH:'A1',
                SLZHH:'576',
                DJZHH:'0',
                JEZHH:'0'
            },{
                DH:'YL12006A',
                MC:'正方形水果盘',
                GG:'0*0*0',
                TH:'',
                DW:'只',
                YS:'',
                SX:'A5单色',
                DQKC:'0',
                SL:'576',
                DJ:'0',
                JE:'0',
                DHZHH:'YL12006A',
                MCZHH:'正方形水果盘',
                GGZHH:'0*0*0',
                DWZHH:'只',
                SXZHH:'A1',
                SLZHH:'576',
                DJZHH:'0',
                JEZHH:'0'
            },{
                DH:'YL12006A',
                MC:'正方形水果盘',
                GG:'0*0*0',
                TH:'',
                DW:'只',
                YS:'',
                SX:'A5单色',
                DQKC:'0',
                SL:'576',
                DJ:'0',
                JE:'0',
                DHZHH:'YL12006A',
                MCZHH:'正方形水果盘',
                GGZHH:'0*0*0',
                DWZHH:'只',
                SXZHH:'A1',
                SLZHH:'576',
                DJZHH:'0',
                JEZHH:'0'
            }],
            total:3,
            loading:false,
            queryParams: {
                pageNum:1,
                pageSize:10,
            }
        }
    },
    methods: {
        showTab(row) {
            this.ZHDH = row.ZHDH;
            this.showCard = true;
        },
        //新增按钮
        handleAdd() {
            this.open = true;
            this.title = "添加物品形态转换单";
            this.WPXTZHDDialog.ZHRQ = '';
            this.WPXTZHDDialog.ZHCK = '';
            this.WPXTZHDDialog.ZHDH = '';
            this.WPXTZHDDialog.ZHR = '';
            this.WPXTZHDDialog.SM = '';
        },
        //修改按钮操作
        handleUpdate(row) {
            this.open = true;
            this.title = "修改物品形态转换单";
            this.WPXTZHDDialog.ZHRQ = row.ZHRQ;
            this.WPXTZHDDialog.ZHCK = row.ZHCK;
            this.WPXTZHDDialog.ZHDH = row.ZHDH;
            this.WPXTZHDDialog.ZHR = row.ZHR;
            this.WPXTZHDDialog.SM = row.SM;

        },
        //取消按钮
        cancel() {
            this.open = false;
        },
        //提交按钮
        submitForm() {
            this.open = false;
        }
    }
}
</script>
